<% layout('./layout/layout') %>
<% block('header').append(`<style></style>`)%>
<div class="row">
  <div class="col-md-12">
    <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title"><%=curr.isNew?'添加':'修改'%>单页</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form action="<%=assetsPath %>/postage/add" method="post" class="form-horizontal" novalidate>
        <div class="box-body">
          <div class="form-group">
            <label for="title" class="col-sm-2 control-label">省份</label>
            <div class="col-sm-10">
              <select id="province" name="province" class="form-control" ></select>
            </div>
          </div>
          <div class="form-group">
            <label for="path" class="col-sm-2 control-label">城市</label>
            <div class="col-sm-10">
              <select id="city" name="city" class="form-control"  >
                <option value="">请选择</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="path" class="col-sm-2 control-label">邮费</label>
            <div class="col-sm-10">
              <input name="fee" class="form-control" value="<%=curr.fee || '' %>"  >
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <label>
                  <input id="ruleToggle" name="isFreeRule" <%=curr.isFreeRule?'checked':''%>  value="true" type="checkbox"> 是否使用满减规则
                </label>
              </div>
            </div>
          </div>
          <div id="ruleAmt" class="row <%=!curr.isFreeRule?' hide_div':''%>">
            <div class="col-md-6">
              <div class="form-group">
                <label for="path" class="col-sm-4 control-label">条件金额</label>
                <div class="col-sm-8">
                  <input name="feeRule" class="form-control" placeholder="达到多少金额之后使用使用结果金额" value="<%=curr.feeRule || '' %>"  >
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="path" class="col-sm-4 control-label">结果金额</label>
                <div class="col-sm-8">
                  <input name="feeAmt" class="form-control" placeholder="满足条件后的邮费" value="<%=curr.feeAmt=='undefined'?'':curr.feeAmt %>"  >
                </div>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <label>
                  <input name="isValid" <%=curr.isValid?'checked':''%>  value="true" type="checkbox"> 是否有效
                </label>
              </div>
            </div>
          </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <div class="col-sm-offset-2 col-sm-10">
            <% if(!curr.isNew) { %>
            <input name="_id" type="hidden" value="<%=curr._id%>" >
            <% }%>
            <button type="submit" class="btn btn-info ">保存</button>
            <button type="reset" class="btn btn-default">重置</button>
          </div>
        </div>
        <!-- /.box-footer -->
      </form>
    </div>
  </div>
</div>
<% block('footer').append(`<script>
    jQuery(function() {
      var dfProvinceId = '${curr.provinceId || ''}'
      var dfProvince = '${curr.provinceId},${curr.province}'
      var dfCity = '${curr.cityId},${curr.city}'
      var $province =  $('#province')
      var $city = $('#city')
      var $ruleToggle = $('#ruleToggle')
      var $ruleAmt = $('#ruleAmt')
      $ruleToggle.on('click', function () {
      	$ruleAmt.toggle()
      })

      $.get('/cityAndArea').done(function (res) {
        var tmp = '<option value="">请选择</option>'
        res.data.list.forEach(function(item){
          tmp += '<option value="' + item.id + ',' + item.name+'" >'+ item.name +'</option>'
        })
        $province.append(tmp)
        init()
      })
      $province.on('change', function () {
        var $this = $(this)
        var val = $this.val()
        var arr = val.split(',')
        setCity(arr[0])
      })
      function init() {
      	console.log(dfProvinceId)
      	if(!dfProvinceId) return
        if (dfProvince.length > 5) {
          $province.val(dfProvince)
        }
        if (dfCity.length > 5) {
          setCity(dfProvinceId,function () {
            $city.val(dfCity)
          })
        }
      }
      function setCity(addrId, cb) {
        $.get('/cityAndArea?addrId=' + addrId + '&name=city').done(function(res){
          var tmp = '<option value="">请选择</option>'
          res.data.list.forEach(function(item){
            tmp += '<option value="' + item.id + ',' + item.name+'" >'+ item.name +'</option>'
            $city.empty().append(tmp)
          })
          cb && cb()
        })
      }
    })
</script>`)%>